<template>
	<div class="wrapper">
	
		<!-- header部分 -->
		<header>
			<p>地址管理</p>
		</header>
		
		<!-- 地址列表部分 -->
		<ul class="addresslist">
			<li v-for="item in listDeliveryAddressArr" :key="item.daId">
				<div class="addresslist-left" @click="setDeliveryAddress(item)">
					<h3>{{item.contactName}}{{item.contactSex==1?'先生':'女士'}} {{item.contactTel}}</h3>
					<p>{{item.address}}</p>
				</div>
				<div class="addresslist-right">
					<i class="fa fa-edit" onclick="location.href='editUserAddress.html'"></i>
					<i class="fa fa-remove"></i>
				</div>
			</li>
		</ul>
		
		<!-- 新增地址部分 -->
		<div class="addbtn" onclick="location.href='addUserAddress.html'">
			<i class="fa fa-plus-circle"></i>
			<p>新增收货地址</p>
		</div>
		<!-- 底部菜单部分 -->
		<Footer></Footer>
	</div>
</template>

<script setup>
	import qs from 'qs';
	import Footer from '../components/Footer.vue'
	//导入路由相关的模块
	import {useRouter,useRoute} from 'vue-router';
	import {ref,inject} from 'vue'
	import {getSessionStorage,getLocalStorage,setLocalStorage} from '../common.js'
	const axios = inject("axios");
	const router = useRouter();
	const route = useRoute();
	const businessId = route.query.businessId;
	const user = getSessionStorage('user');
	const listDeliveryAddressArr = ref([]);
	const deliveryAddress = getLocalStorage(user.userId);
	
	const listDeliveryAddressByUserId =()=> {
		axios.post('DeliveryAddressController/listDeliveryAddressByUserId',qs.stringify({
			userId: user.userId
		})).then((response) => {
			listDeliveryAddressArr.value = response.data;
			console.log(listDeliveryAddressArr.value);
		}).catch((error) => {
			console.log(error);
		});
	};
	//初始化商家列表信息
	listDeliveryAddressByUserId();
	
	const setDeliveryAddress=(deliveryAddress)=>{
		setLocalStorage(user.userId,deliveryAddress);
		router.push({
			path:"/orders",
			query:{
				businessId:businessId
			}
		});
	}
	
</script>

<style scoped>
	/*************** 总容器 ***************/
	.wrapper{
		width: 100%;
		height: 100%;
		background-color: #F5F5F5;
	}
	/*************** header ***************/
	.wrapper header{
		width: 100%;
		height: 12vw; 
		background-color: #0097FF;
		display: flex;
		justify-content: space-around;
		align-items: center;
		color: #fff;
		font-size: 4.8vw;
		position: fixed;
		left: 0;
		top: 0;
		/*保证在最上层*/
		z-index: 1000; 
	}
	
	/*************** addresslist ***************/
	.wrapper .addresslist{
		width: 100%;
		margin-top: 12vw;
		background-color: #fff;
	}
	.wrapper .addresslist li{
		width: 100%;
		box-sizing: border-box;
		border-bottom: solid 1px #DDD;
		padding: 3vw;
		
		display: flex;
	}
	.wrapper .addresslist li .addresslist-left{
		flex:5;
		/*左边这块区域是可以点击的*/
		user-select: none;
		cursor: pointer;
	}
	.wrapper .addresslist li .addresslist-left h3{
		font-size: 4.6vw;
		font-weight: 300;
		color: #666;
	}
	.wrapper .addresslist li .addresslist-left p{
		font-size: 4vw;
		color: #666;
	}
	.wrapper .addresslist li .addresslist-right{
		flex:1;
		font-size: 5.6vw;
		color: #999;
		cursor: pointer;
		
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	/*************** 新增地址部分 ***************/
	.wrapper .addbtn{
		width: 100%;
		height: 14vw;
		border-top: solid 1px #DDD;
		border-bottom: solid 1px #DDD;
		background-color: #fff;
		margin-top: 4vw;
		
		display: flex;
		justify-content: center;
		align-items: center;
		
		font-size: 4.5vw;
		color: #0097FF;
		user-select: none;
		cursor: pointer;
	}
	.wrapper .addbtn p{
		margin-left: 2vw;
	}
	/*************** footer ***************/
	.wrapper .footer{
		width: 100%;
		height: 14vw;
		border-top: solid 1px #DDD;
		position: fixed;
		left: 0;
		bottom: 0;
		/*保证在最上层*/
		z-index: 1000; 
		background-color: #fff;
		
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.wrapper .footer li{
		/*li本身的尺寸完全由内容撑起*/
		user-select: none;
		cursor: pointer;
		color: #999;
		
		/*主轴方向设为column，然后每个子元素才能垂直水平都居中*/
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.wrapper .footer li i{
		font-size: 5vw;
	}
	.wrapper .footer li p{
		font-size: 2.8vw;
	}
</style>
